<#import "/include/main.ftl" as base>
<#assign title = "测试页"/>
<@base.header title=title keywords="公司简介2" description="公司简介3">
<div>
	<h1>layui 展示页面</h1>
	<table class="layui-hide" id="demo" lay-filter="test"></table>
	<script type="text/html" id="barDemo">
	  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
	  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<div class="layui-tab-item">
      <div id="pageDemo"></div>
    </div>
	<div class="layui-tab">
	  <ul class="layui-tab-title">
	    <li class="layui-this">标题一</li>
	    <li>标题二</li>
	    <li>标题三</li>
	  </ul>
	  <div class="layui-tab-content">
	    <div class="layui-tab-item layui-show">
	    	<button class="layui-btn" lay-submit lay-filter="login">登入</button>  
	    	<button id="btn" >测试按钮</button>  
	    	<button data-method="liveVideo" class="layui-btn">观看直播</button>  
	    </div>
	    <div class="layui-tab-item">
	    	<button data-method="setTop" class="layui-btn">测试按钮</button>
	    	<button data-method="fun" class="layui-btn">测试按钮</button>
	    	<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
			  <div class="layui-progress-bar layui-bg-red" lay-percent="0%"><span class="layui-progress-text">0%</span></div>
			</div>
	    	<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
			  <button class="layui-btn site-demo-active" data-type="setPercent">设置50%</button>
			  <button class="layui-btn site-demo-active" data-type="loading">模拟loading</button>
			</div>
 
    	</div>
	    <div class="layui-tab-item">
      		
    	
	</div>
</div>
<script>
	$(function(){		
		layui.use(['layer', 'form'], function(){
			  var layer = layui.layer
			  ,form = layui.form,
			  table = layui.table ,//表格  
			  $ = layui.jquery,
  			  element = layui.element, //Tab的切换功能，切换事件监听等，需要依赖element模块
			  laypage = layui.laypage;	
			  //触发事件
  			var active = {
  				setTop: function(){
  					var thad = this;
  					alert("JKJKJK");
  				},
  				liveVideo : function(){
  					var that = this; 
			      //多窗口模式，层叠置顶
			      layer.open({
			        type: 2 //此处以iframe举例
			        ,title: '当你选择该窗体时，即会在最顶端'
			        ,area: ['390px', '260px']
			        ,shade: 0
			        ,maxmin: true
			        ,offset: [ //为了演示，随机坐标
			          Math.random()*($(window).height()-300)
			          ,Math.random()*($(window).width()-390)
			        ] 
			        ,content: 'https://view.csslcloud.net/api/view/index?roomid=48EE02A3A4CB1A0D9C33DC5901307461&userid=41E91C81E48CAD28'
			        ,btn: ['继续弹出', '全部关闭'] //只是为了演示
			        ,yes: function(){
			          $(that).click(); 
			        }
			        ,btn2: function(){
			          layer.closeAll();
			        }
			        
			        ,zIndex: layer.zIndex //重点1
			        ,success: function(layero){
			          layer.setTop(layero); //重点2
			        }
			      });
  				},
  				fun : function(){
  				  var that = this; 
			      //多窗口模式，层叠置顶
			      layer.open({
			        type: 2 //此处以iframe举例
			        ,title: '当你选择该窗体时，即会在最顶端'
			        ,area: ['390px', '260px']
			        ,shade: 0
			        ,maxmin: true
			        ,offset: [ //为了演示，随机坐标
			          Math.random()*($(window).height()-300)
			          ,Math.random()*($(window).width()-390)
			        ] 
			        ,content: '//layer.layui.com/test/settop.html'
			        ,btn: ['继续弹出', '全部关闭'] //只是为了演示
			        ,yes: function(){
			          $(that).click(); 
			        }
			        ,btn2: function(){
			          layer.closeAll();
			        }
			        
			        ,zIndex: layer.zIndex //重点1
			        ,success: function(layero){
			          layer.setTop(layero); //重点2
			        }
			      });
  				},
  				setPercent: function(){
			      //设置50%进度
			      element.progress('demo', '50%')
			    }
			    ,loading: function(othis){
			      var DISABLED = 'layui-btn-disabled';
			      if(othis.hasClass(DISABLED)) return;
			    
			      //模拟loading
			      var n = 0, timer = setInterval(function(){
			        n = n + Math.random()*10|0;  
			        if(n>100){
			          n = 100;
			          clearInterval(timer);
			          othis.removeClass(DISABLED);
			        }
			        element.progress('demo', n+'%');
			      }, 300+Math.random()*1000);
			      
			      othis.addClass(DISABLED);
			    }
			    
  			};
  			$('.layui-btn').on('click', function(){
		    	var othis = $(this), method = othis.data('method');
		    	active[method] ? active[method].call(this, othis) : '';
		    });
		   // $('.site-demo-active').on('click', function(){//滚动条触发事件
			 //   var othis = $(this), type = $(this).data('type');
			 //   active[type] ? active[type].call(this, othis) : '';
			 // });
			  
		    $("#btn").on('click',function(){
		    	  
		    });
		    //表格demo
		    //执行一个 table 实例
		  table.render({
		    elem: '#demo'
		    ,height: 420
		    ,url: '/test-layui/listData' //数据接口
		    ,title: '用户表'
		    ,page: true //开启分页
		    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
		    ,totalRow: true, //开启合计行
		    parseData: function(res) {
				return {
					"code": res.code,
					//"msg": res.message,
					//"count": res.data.page.total,
					"data": res.data.datas
				};
			}
		    ,cols: [[ //表头
		       {type: 'checkbox', fixed: 'left'}
		      ,{field: 'id', title: '编号', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
		      ,{field: 'name', title: '用户名', width:80}
		      ,{field: 'age', title: '年龄', width: 90, sort: true, totalRow: true}		     
		      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
		    ]]
		  });
  			//监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
        layer.msg('添加');
        layer.open({
			type: 2, // iframe层
			title: "新增",
			area: [580+'px', 460+'px'],
			maxmin: true,
			shade: 0.2,
			content: "/test-layui/add",
			end: function() {
				//Table.reload();
			}
		});
      break;
      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
        }
      break;
      case 'delete':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else {
          layer.msg('删除');
        }
      break;
    };
  });
  
	  //监听行工具事件
	  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	    if(layEvent === 'detail'){
	      layer.msg('查看操作');
	    } else if(layEvent === 'del'){
	      layer.confirm('真的删除行么', function(index){
	        obj.del(); //删除对应行（tr）的DOM结构
	        layer.close(index);
	        //向服务端发送删除指令
	      });
	    } else if(layEvent === 'edit'){
	      layer.msg('编辑操作');
	    }
	  });
	  //分页
	  laypage.render({
	    elem: 'pageDemo' //分页容器的id
	    ,count: 100 //总页数
	    ,skin: '#1E9FFF' //自定义选中色值
	    //,skip: true //开启跳页
	    ,jump: function(obj, first){
	      if(!first){
	        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
	      }
	    }
	  });
  
		});
		
		
	});
</script>
</@base.header>
